<div style="padding:10px">
  <nz-card style="width:100%;padding: 10px;">
    <div nz-row>
      <div nz-col [nzSpan]="12">
        <nz-card style="width: 100%;">
          <nz-table #basicTable [nzData]="listOfData" nzBordered="true" nzTitle="毕业所需学分修读进度" nzShowPagination="false"
            [nzScroll]="{ y: '100%' }" style="height: 300px;">
            <thead>
              <tr>
                <th nzWidth="30%">类型</th>
                <th nzWidth="44%">进度</th>
                <th nzWidth="13%" nzAlign="center">已修</th>
                <th nzWidth="13%" nzAlign="center">目标</th>
              </tr>
            </thead>
            <tbody class="scrollbar">
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.type }}</td>
                <td>
                  <nz-progress nzSize="small"
                    [nzPercent]="(data.creditsTaken / data?.targetCredits) * 100 | number: '1.1-1'" [nzStrokeColor]="
                          (data?.creditsTaken / data?.targetCredits) * 100 < 20
                              ? '#FF0000'
                              : (data?.creditsTaken / data?.targetCredits) * 100 < 70
                              ? '#FFA500'
                              : (data?.creditsTaken / data?.targetCredits) * 100 < 100
                              ? '#FFFF00'
                              : '#008000'
                          "></nz-progress>
                </td>
                <td nzAlign="right">{{ data?.creditsTaken }}</td>
                <td nzAlign="right">{{ data?.targetCredits }}</td>
              </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </div>
      <div nz-col [nzSpan]="12" style="padding-left: 10px; height: 100%;">
        <nz-card style="width: 100%; height: 350px;" nzTitle="创新分加分材料" [nzExtra]="extraTemplate">
          <nz-empty [nzNotFoundImage]="
                        'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'
                    " [nzNotFoundContent]="contentTpl" [nzNotFoundFooter]="footerTpl">
            <ng-template #contentTpl>
              <span nz-tooltip nzTooltipTitle="创新分根据加分材料手动记录">
                <nz-input-number [(ngModel)]="studentCreditRecord.innovationScore" [nzMin]="0"
                  [nzMax]="studentCreditRecord.academicProgress.innovationScore" [nzStep]="0.1"></nz-input-number>
                <button nz-button [nzType]="'primary'" (click)="complete()" class="ml-sm">
                  <span>保存</span>
                </button>
              </span>
            </ng-template>
            <ng-template #footerTpl>
              <button nz-button nzType="primary" (click)="upload()">上传</button>
              <button nz-button nzType="success" (click)="onClick()">查看</button>
            </ng-template>
          </nz-empty>
        </nz-card>
        <ng-template #extraTemplate>
          <nz-affix [nzOffsetTop]="120">
            <button nz-button nzType="primary" (click)="reflesh()">
              <span>刷新</span>
            </button>
          </nz-affix>
        </ng-template>
      </div>
    </div>

    <app-attach-small #attachSmallComponent [attachFiles]="attachFiles" [attachType]="fileType" [isShow]="isShow"
      [readOnly]="isReview" (result)="resultChange($event)"></app-attach-small>

    <div nz-row>
      <div nz-col [nzSpan]="24" style="padding-left: 10px;">
        <nz-card style="width: 100%;">
          <div echarts [theme]="theme" [options]="optionsAddress" class="top-div"></div>
        </nz-card>
      </div>
    </div>

  </nz-card>
</div>
